<template>
  <div class="subscribe-wrapper">
    <div class="subscribe-header">
      <el-form :inline="true">
        <el-form-item class="subscribe-keyword" label="关键字:">
          <el-input v-model="input" placeholder="请输入模块名称/租户名称关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="subscribe-content">
      <div class="content-title">
        <el-button type="primary">新增</el-button>
      </div>
      <div class="content-center">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column label="租户名称" width="180">山西金泉集团</el-table-column>
          <el-table-column label="订阅申请日期" width="120">2020-10-29</el-table-column>
          <el-table-column label="本次订阅模块" width="500">排队管理；过磅管理；磁卡管理；销售管理；采购管理；财务管理；门禁管理； 过磅管理；排队管理；门禁管理；运输管理；财务管理</el-table-column>
          <el-table-column label="生效日期">2020-11-01</el-table-column>
          <el-table-column label="状态" min-width="90">
            <template slot-scope="scope">
              <div class="status">
                <p class="take-effect status-item"><span class="point"></span><span class="mark">生效</span></p>
                <!--              <p class="invalid status-item"><span class="point"></span><span class="mark">未生效</span></p>-->
                <!--              <p class="block-up status-item"><span class="point"></span><span class="mark">停用</span></p>-->
                <!--              <p class="expire status-item"><span class="point"></span><span class="mark">到期</span></p>-->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="110">
            <template slot-scope="scope">
              <el-link type="primary">修改</el-link>
              <el-dropdown>
                <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>生效</el-dropdown-item>
                  <el-dropdown-item>禁止使用</el-dropdown-item>
                  <el-dropdown-item>延长有效期</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        input: '',
        tableData: [{}]
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .subscribe-wrapper{
    p{margin: 0}
    .subscribe-header{
      ::v-deep.el-form{
        .el-form-item{
          margin: 0;
        }
        .el-form-item__label,.el-form-item__content{
          line-height: 36px;
        }
        .el-input {
          width: inherit;
          height: 36px;

          input {
            width: 250px;
            height: 36px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
        }

      }
      .el-button--primary{
        margin-left: 50px;
      }
    }
    .subscribe-content{
      margin-top: 20px;

      ::v-deep.el-table {
        margin-top: 20px;
        .el-table__header-wrapper{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
        }
        th{
          height: 46px;
          background: #EEEEEE;
          padding: 0;
          /*border-color: #dddddd;*/
        }

        .el-table__row{
          td{
            padding: 0;
            /*border-color: #dddddd;*/
          }
          td:not(:nth-child(4)) .cell{
            text-align: center;
          }
          .cell{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            /*height: 48px;*/
            padding: 6px 5px;
            box-sizing: content-box;
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 2;*/
            /*overflow: hidden;*/
            line-height: 25px;
          }
          .el-link,.el-dropdown-link,.el-icon-arrow-down{
            font-size: 16px;
          }
          .el-dropdown-link {
            cursor: pointer;
            color: #1890FF;
          }
          .el-link--inner{
            margin-right: 10px;
          }
          .el-link:last-child .el-link--inner{
            margin-right: 0;
          }
          .el-link.is-underline:hover:after{
            border-bottom: none;
          }
        }
        .status{
          .status-item{
            span.point{
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 5px;
            }
            span.mark{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
            }
          }
          .status-item.invalid{
            span.point{
              background: #999999;
            }
            span.mark{
              color: #999999;
            }
          }
          .status-item.take-effect{
            span.point{
              background: #1890FF;
            }
            span.mark{
              color: #1890FF;
            }
          }
          .status-item.expire{
            span.point{
              background: #F59A23;
            }
            span.mark{
              color: #F59A23;
            }
          }
          .status-item.block-up{
            span.point{
              background: #FF3E3E;
            }
            span.mark{
              color: #FF3E3E;
            }
          }
        }
      }
    }
  }

  .el-button {
    width: 60px;
    height: 36px;
    font-size: 14px;
    border-radius: 4px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    padding: 0;
    line-height: 36px;
  }

  .el-button--primary {
    background: #1890FF;
    color: #FFFFFF;
    margin-right: 5px;
  }

  .el-button--primary:active {
    background: #167AD9;
  }
  .el-button--default {
    background: #fff;
    border: 1px solid #AAAAAA;
    color: #666666;
  }

  .el-button--default:active {
    color: #1890ff;
    border-color: #1890ff;
  }
</style>
